<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page pageEncoding="utf-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>管理员后台系统</title>
    <!-- 引入必要的CSS和JS文件 -->
    <style>

        body {
            font-family: Arial, sans-serif;
        }

        header {
            background-color: #333;
            color: white;
            padding: 10px 20px;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin-right: 10px;
        }

        nav .active {
            font-weight: bold;
        }

        iframe {
            width: 100%;
            height: calc(100vh - 60px);
            border: none;
        }
    </style>
    <link rel="stylesheet" href="styles.css">
    <script src="scripts.js"></script>
</head>
<body>
<header>
    <h1>新青年宠物店管理员后台</h1>
    <nav>
        <a href="#customer-management" class="tab-link active">客户管理</a>
        <a href="#appointment-info" class="tab-link">预约信息</a>
    </nav>
</header>
<main>
    <iframe id="content-frame" name="content-frame" src="${pageContext.request.contextPath}/useradmin.action"></iframe>
</main>
</body>
<script>

    document.addEventListener('DOMContentLoaded', function() {
        const tabLinks = document.querySelectorAll('.tab-link');

        // 初始状态设置第一个为激活状态
        tabLinks[0].classList.add('active');

        // 监听链接的点击事件
        tabLinks.forEach(link => {
            link.addEventListener('click', function(event) {
                event.preventDefault();

                // 移除所有链接的激活类
                tabLinks.forEach(tab => tab.classList.remove('active'));

                // 将点击的链接设置为激活状态
                this.classList.add('active');

                // 设置iframe的src属性
                const frame = document.getElementById('content-frame');
                if (this.href.includes('customer-management')) {
                    frame.src = '${pageContext.request.contextPath}/useradmin.action';
                } else if (this.href.includes('appointment-info')) {
                    frame.src = '${pageContext.request.contextPath}/subadmin.action';
                }
            });
        });
    });
</script>
</html>